<template>
  <div class="bg_f2">
    <div class="ub ub-ver bg_w">
      <div class="user" @click="userClc">
        <div class="userIcon ub-img1" v-show="!loginData.isLogin || !loginData.userIcon"></div>
        <!-- <div class="userIcon ub-img1" v-show="!loginData.isLogin || !loginData.userInfo.userIcon"></div> -->
        <div v-show="loginData.isLogin && loginData.userIcon" style="width:100%;height:100%">
          <img :src="loginData.userIcon" style="width:100%;height:100%">
        </div>
      </div>
      <div class="ub blockBox bg_d">
        <div class="ub pad_05" @click="goOtherUrl()">
          <!-- <div class="ub pad_05" @click="window.href =$utils.goOtherUrl()"> -->
          <div class="ub-img leftIcon"></div>
          <div class="ub fc_w margin-l05">首页</div>
        </div>
      </div>
      <div class="ub blockBox_w"></div>
      <div v-show="loginData.isLogin">
        <div class="ub ub-pc ub-ac blockBox_w bold">{{loginData.userInfo.userMobile}}</div>
      </div>
      <div v-show="!loginData.isLogin">
        <div class="ub ub-pc ub-ac blockBox_w tx-c fz12" style="vertical-align:center">登录/注册</div>
      </div>
    </div>
    <div class="mar_t1 ub bg_w ub-ver">
      <div class="ub ub-ac ub-pj wd_100 pad_1 pad_b05 bs_bb" @click="orderClc(0)">
        <div class="ub wd_100">
          <div class="ub wd_50 fz12">全部订单</div>
          <div class="ub ub-ac wd_50 ub-pe">
            <div class="fc-8b fz08">查看全部订单</div>
            <div class="rightA ub-img"></div>
          </div>
        </div>
      </div>
      <div class="line"></div>
      <div class="ub wd_100 ub-pj">
        <div class="ub ub-ver ub-pc ub-ac imgBox" @click="orderClc(1)">
          <div class="img_dzf ub-img1 img_innerbox"></div>
          <div class="fz08">待支付</div>
        </div>
        <div class="ub ub-ver ub-pc ub-ac imgBox" @click="orderClc(2)">
          <div class="img_yzf ub-img1 img_innerbox"></div>
          <div class="fz08">已支付</div>
        </div>
        <div class="ub ub-ver ub-pc ub-ac imgBox" @click="orderClc(3)">
          <div class="img_ycp ub-img1 img_innerbox"></div>
          <div class="fz08">已出票</div>
        </div>
        <div class="ub ub-ver ub-pc ub-ac imgBox">
          <div class="img_yqx ub-img1 img_innerbox" @click="orderClc(4)"></div>
          <div class="fz08">已取消</div>
        </div>
      </div>
    </div>
    <div class="ub ub-ver bg_w mar_t1">
      <div class="ub ub-ac ub-pj pad_1 uhide" @click="airDynamic">
        <div class="ub">
          <div class="ub img_sbox ub-img1 img_ygzhb"></div>
          <div class="ub">已关注航班</div>
        </div>
        <div class="ub rightA ub-img1"></div>
      </div>
      <div class="ub ub-ac ub-pj pad_1" @click="cycjrClc">
        <div class="ub">
          <div class="ub img_sbox ub-img1 img_cycjr"></div>
          <div class="ub">常用乘机人管理</div>
        </div>
        <div class="ub rightA ub-img1"></div>
      </div>
      <div class="ub line"></div>
      <div class="ub ub-ac ub-pj pad_1" @click="myitinerary">
        <div class="ub">
          <div class="ub img_sbox ub-img1 img_wdxcd"></div>
          <div class="ub">我的行程单</div>
        </div>
        <div class="ub rightA ub-img1"></div>
      </div>
    </div>
    <div class="ub ub-ver bg_w mar_t1">
      <div class="ub ub-ac ub-pj pad_1" @click="helpCenters">
        <div class="ub">
          <div class="ub img_sbox ub-img1 img_bzzx"></div>
          <div class="ub">帮助中心</div>
        </div>
        <div class="ub rightA ub-img1"></div>
      </div>
      <div class="ub ub-ac ub-pj pad_1" @click="aboutUs">
        <div class="ub">
          <div class="ub img_sbox ub-img1 img_aboutus"></div>
          <div class="ub">关于我们</div>
        </div>
        <div class="ub rightA ub-img1"></div>
      </div>
    </div>
    <div class="ub ub-ver bg_w mar_t1">
      <a class="ub ub-ac ub-pj pad_1" href="tel:95373" style="color:#333;">
        <div class="ub">
          <div class="ub img_sbox ub-img1 img_bdkf"></div>
          <div class="ub">拨打客服</div>
        </div>
        <div class="ub rightA ub-img1"></div>
      </a>
    </div>
    <div v-show="loginData.isLogin">
      <div class="ub bg_w mar_t1 ub-pc ub-ac pad_1">
        <div class="ub fz12 fc_purple" @click="logoutClc">退出登录</div>
      </div>
    </div>

  </div>
</template>
<script type="text/ecmascript-6">
import { mapState } from 'vuex';
// console.log(mapState);
export default {
  created: function () {
    this.$store.commit('changeHeader', { // 提交首页header
      left: '首页',
      right: '',
      middle: '',
      ifshow: false,
      leftAction: '/index',
      leftIcon: 'leftIcon',
      rightAction: '',
      rightIcon: ''
    });
    // console.log(this.loginData);
    // 查找是否曾经登录
    let loginData = this.$utils.getSession('loginData');
    if (!loginData) {
      return false;
    }
    this.$store.commit('setLogin', loginData);
    this.initUserInfo()
  },
  components: {
  },
  computed: mapState(['loginData', 'helpCenter']),
  methods: {
    initUserInfo: function () {
      let userInfo = this.loginData.userInfo;
      if (!userInfo) {
        this.$router.push('/login');
      }
      let userId = userInfo.userId;
      let loginToken = userInfo.token.loginToken;
      let userMobile = userInfo.userMobile;
      let content = {
        'userMobile': userMobile,
        'userId': userId
      }
      let data = this.$utils.getUserContent(content);
      data.headers.userId = userId;
      data.headers.loginToken = loginToken;
      let self = this;
      this.$utils.ajax(data, 'searchInfo', self, function (res) {
        console.log(res)
      })
    },
    myitinerary: function () {
      if (!this.loginData.isLogin) {
        this.$router.push('/login');
        return false;
      }
      window.location = 'payment/Myitinerary.html';
      return true;
    },
    checkLogin: function () {
      if (!this.loginData.isLogin) {
        // console.log()
        this.$router.push('/login');
        return false;
      }
      return true;
    },
    userClc: function () { // 头像点击
      let flag = this.checkLogin();
      console.log('this is login' + flag)
      if (!flag) {
        return false;
      }
      this.$router.push('/userInfo');
    },
    cycjrClc: function () { // 常用乘机人点击
      let flag = this.checkLogin();
      if (!flag) {
        return false;
      }
      this.$router.push('/passengers');
    },
    logoutClc: function () { // logout
      this.$store.commit('clearLogin');
      this.$store.commit('resetAllOders'); // 清除订单信息
      this.$utils.removeSession('loginData');
      this.$store.dispatch('showTx', { text: '退出成功' });
      window.localStorage.setItem('loginData', '')
      window.localStorage.setItem('isLogin', '')
      window.localStorage.setItem('userIcon', '')
    },
    helpCenters: function () {
      this.$store.commit('clearhelpCenter')
      this.$router.push('/helpCenter');
    },
    aboutUs: function () {
      let content = {
        'columnId': '83',
        'detail': '',
        'listTitle': '关于我们',
        'detailTitle': '',
        'newsTypeId': '',
        'firstDate': [],
        'secondDate': []
      }
      this.$store.commit('sethelpCenter', content);
      this.$router.push('/helpCenterList')
    },
    orderClc: function (type) { // 查看订单
      // console.log(type);
      // this.$store.commit('setConfirm', { ifShow: true, text: 'ceshinibabbabab' });
      // this.$store.commit('setConfirmCallBak', function () {
      //   console.log('123456');
      // });
      if (!this.loginData.isLogin) {
        this.$router.push('/login');
        return false;
      }
      this.$store.commit('setSearchType', type);
      this.$router.push('/allOrders');
    },
    airDynamic: function () {
      this.$router.push('/airDynamic');
    },
    goOtherUrl: function () {
      this.$router.push('/index');
      // window.location.href = 'https://wap.westair.cn/flyplus-newAPI/index.html'
    }
  }
}
</script>

<style lang="stylus">
@import '../../stylus/base.styl';
.blockBox
  height: f_times(3);
  width: 100%;
.blockBox_w
  height: f_times(3);
  width: 100%;
.user
  width: f_times(4);
  height: f_times(4);
  /* border: 1px solid red; */
  position: absolute;
  z-index: 3000;
  border-radius: 50%;
  left: 50%;
  top: f_times(2);
  margin-left: f_times(-2);
  overflow: hidden;
.bold
  font-weight: bold;
.rightA
  width: f_times(1.5);
  height: f_times(1.5);
  background-image: url('arrow_right@2x.png');
.imgBox
  width: 25%;
  padding: f_times(0.6);
  box-sizing: border-box;
.img_innerbox
  width: f_times(1.5);
  height: f_times(1.5);
  margin-bottom: f_times(0.6);
.img_sbox
  width: f_times(1.2);
  height: f_times(1.2);
  margin-right: f_times(0.6);
.img_dzf
  background-image: url('member_needpay@2x.png');
.img_yzf
  background-image: url('member_paid@2x.png');
.img_ycp
  background-image: url('member_vailed@2x.png');
.img_yqx
  background-image: url('member_cancel@2x.png');
.img_ygzhb
  background-image: url('member_fav@2x.png');
.img_cycjr
  background-image: url('member_chengjiren@2x.png');
.img_wdxcd
  background-image: url('i_print.png');
.img_bzzx
  background-image: url('member_question@2x.png');
.img_aboutus
  background-image: url('member_about@2x.png');
.img_bdkf
  background-image: url('member_tel@2x.png');
.userIcon
  height: 100%;
  width: 100%;
  background-image: url('member_avatar_default.png');
.leftIcon
  height: $fontSize;
  width: $fontSize;
  background-image: url('');
.fc_w
  color: #fff;
</style>